<template>
  <div>
    <table-search :searchOptions="searchOptions" :searchSource="searchSource"
     @searchHandle="searchHandle" @resetHandle="resetHandle">
      <template slot="table-search_behind">
        <el-button v-if="isAuth('config:ip:save')" type="primary" icon="el-icon-edit" :size="searchOptions.size" @click="addHandle()">新增</el-button>
      </template>
    </table-search>
    <table-content ref="table" :tableOptions="tableOptions" :tableSource="tableSource" @selectionChangeHandle="selectionChangeHandle"
     @sortChangeHandle="sortChangeHandle" @pageHandle="pageHandle">
    </table-content>
    <ip-info ref="ipInfoDialog" :size="this.size" @flush="flush"></ip-info>
  </div>
</template>

<script>
import TableSearch from '@/components/table/table-search'
import TableContent from '@/components/table/table-content'
import IpInfo from '@/views/modules/ip/ip-info'
import { getIPListApi, deleteIPApi } from '@/api/ip'

export default {
  components: { TableSearch, TableContent, IpInfo },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      searchOptions: {
        size: this.size,
        show: true,
        init: true
      },
      tableOptions: {
        size: this.size,
        highlightCurrentRow: true, // 是否要高亮当前行
        fit: true, // 列的宽度是否自撑开
        mutiSelect: false, // 是否显示选择框
        pagination: true // 是否分页
      },
      searchSource: {
        inModel: {
          ip: '',
          minCreateTime: '',
          maxCreateTime: ''
        },
        operations: [
          {
            name: 'IP',
            key: 'ip',
            type: 'text',
            width: '10rem',
            length: 15
          },
          {
            name: '创建时间',
            key: 'createTime',
            type: 'daterange',
            width: '18rem'
          },
          {
            type: 'place',
            width: '30rem'
          }
        ]
      },
      tableSource: {
        headers: [
          {
            prop: 'createTime',
            label: '创建时间',
            width: '150px',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            width: '150px',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          {
            prop: 'ip',
            label: 'IP',
            width: '150px',
            route: {
              type: 0,
              field: 'id',
              method: (data) => {
                this.viewHandle(data)
              }
            }
          },
          { prop: 'country', label: '国家', width: '150px' },
          { prop: 'province', label: '省份', width: '150px' },
          { prop: 'city', label: '城市', width: '150px' },
          { prop: 'isp', label: '服务商' },
          {
            prop: 'white',
            label: '白名单',
            width: '80px',
            tag: {
              prop: 'white',
              filter: (val) => {
                let data = {
                  true: 'success',
                  false: 'info'
                }
                return data[val]
              }
            }
          },
          {
            prop: 'black',
            label: '黑名单',
            width: '80px',
            tag: {
              prop: 'black',
              filter: (val) => {
                let data = {
                  true: 'success',
                  false: 'info'
                }
                return data[val]
              }
            }
          },
          {
            operation: true,
            width: '110rem',
            operations: [
              {
                label: '删除',
                type: 'danger',
                icon: 'el-icon-delete',
                show: true,
                permission: 'config:ip:delete',
                method: (index, row) => {
                  this.delHandle(index, row)
                }
              }
            ]
          }
        ],
        data: []
      },
      query: {
        sortField: '',
        sortRule: 1,
        page: 1,
        pageSize: 15,
        ip: '',
        minCreateTime: '',
        maxCreateTime: ''
      },
      selections: []
    }
  },
  created() {
    this.list(this.query)
  },
  methods: {
    list(data) {
      getIPListApi(data).then(res => {
        this.tableSource.data = res.data
      })
    },
    flush() {
      this.list(this.query)
    },
    searchHandle(obj) {
      this.query.page = obj.page
      Object.assign(this.query, obj.backData)
      this.list(this.query)
    },
    resetHandle() {
      Object.assign(this.$data.query, this.$options.data().query)
      this.$refs.table.init()
      this.list(this.query)
    },
    selectionChangeHandle(obj) {
      this.selections = obj.backData
    },
    sortChangeHandle(obj) {
      let column = obj.backData
      if (column.order) {
        this.query.sortField = column.prop
        // 倒序
        if (column.order === 'descending') {
          this.query.sortRule = 1
        } else {
          this.query.sortRule = 0
        }
      } else {
        // 不排序
        this.query.sortField = ''
        this.query.sortRule = 0
      }
      this.list(this.query)
    },
    pageHandle(obj) {
      this.query.page = obj.backData.page
      this.query.pageSize = obj.backData.pageSize
      this.list(this.query)
    },
    // 查看
    viewHandle (id) {
      this.$refs.ipInfoDialog.dialogOptions.show = true
      this.$refs.ipInfoDialog.init(1, id)
    },
    // 删除
    delHandle (index, row) {
      deleteIPApi(row.id).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.list(this.query)
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    // 新增
    addHandle () {
      this.$refs.ipInfoDialog.dialogOptions.show = true
      this.$refs.ipInfoDialog.init(0)
    }
  }
}
</script>

<style lang="scss" scoped>
  .scheduled {
    &_card {
      text-align: left;
      >.el-card__header {
        padding: 8px 20px !important;
      }
    }
  }
</style>
